<template>
    <div class="main right-in">

        <el-row>
            <el-col :span="24" class="title_area">
                <h4>商品详情</h4>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ name: 'productList' }">商品列表</el-breadcrumb-item>
                    <el-breadcrumb-item>商品详情</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>

        <section class="inputs" v-if="product">
            <el-row :gutter="12">
                <el-col :span="8">
                    <img :src="product.img" width="100" height="100" alt="qe">
                </el-col>
                <el-col :span="8">
                    名称：{{ product.name }}
                </el-col>
                <el-col :span="8">
                    价格：{{ product.price }}
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="8">
                    折扣价：{{ product.discount }}
                </el-col>
                <el-col :span="8">
                    销售数量：{{ product.sale_count }}
                </el-col>
                <el-col :span="8">
                    点赞数：{{ product.zan_number }}
                </el-col>
            </el-row>
        </section>


    </div>
</template>

<script>
  import url from '~/conf/settings'
  import { mapState } from 'vuex'

  export default {
    data() {
      return {
        product: {}
      }
    },
    created(){

      let params = {
        id: this.$route.params.id
      }
      this.$store.dispatch('productDetail', params).then((ret)=>{
        this.product = ret.data.product

      })
    },
    methods: {

    },
  }
</script>

<style scoped>
    .inputs .el-row{ font-size: 14px; }
    .actions {
        text-align: right;
        padding-bottom: 14px;
    }
    /*.middle_panel .inputs .el-row{ margin: 12px 0; }*/
    .middle_panel .inputs .el-row .el-input{ margin:  0 0 12px 0; }
    .middle_panel .inputs .el-row .dbtn{ height:36px!important; line-height: 36px!important; padding:0 24px!important;  font-size: 14px; }
    .middle_panel .inputs{ min-height: 250px; }
</style>
<style>
    .inputs .el-badge .el-badge__content.is-fixed{top:10px!important;}
    .middle_panel .inputs .el-row .el-button--primary span{ color:#fff!important; }
    .fenpei .el-row{margin:12px 0;}
    .select_down{margin-top:12px;}
</style>
